<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-button type="primary" @click="showAddDialog">添加</el-button>
                    </el-form-item>
                    <el-form-item style="float: right;">
                        <el-input v-model="pname" placeholder="请输入要搜索的姓名" @input="selectByPage(1)" />
                    </el-form-item>
                </el-form>
                <el-table :data="pageInfo.list" style="width: 100%">
                    <el-table-column prop="pid" label="ID" width="150px"/>
                    <el-table-column prop="pname" label="维修人员姓名" width="150px"/>
                    <el-table-column prop="pphone" label="维修人员电话" width="200px"/>
                    <el-table-column prop="department.dname" label="部门名称"width="150px" />
                    <el-table-column prop="admin.username" label="维修人员账户" width="100px" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click="selectBypid(scope.row.pid)">修改</el-button>
                            <el-button size="small" type="primary" @click="selectBypid1(scope.row.pid)">添加账密</el-button>
                            <el-button size="small" type="primary" @click="selectBypid2(scope.row.pid)">修改账密</el-button>
                            <el-popconfirm title="确认删除?" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="deleteByPid(scope.row.pid)">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="row-bg" justify="center" style="margin-top:20px ;">
                    <el-pagination background layout="prev, pager, next" :total="pageInfo.total"
                        :page-size="pageInfo.pageSize" @change="selectByPage" />
                </el-row>
            </el-card>
        </el-col>
    </el-row>
    <!--添加维修人员对话框开始 -->
    <el-dialog v-model="addDialogShow" title="添加维修人员" width="500">
        <el-form>
            <el-form-item label="维修人员姓名" label-width="25%">
                <el-input v-model="repairPersonnelAdd.pname" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="维修人员电话" label-width="25%">
                <el-input v-model="repairPersonnelAdd.pphone" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="部门名称" label-width="25%">
                <el-select v-model="repairPersonnelAdd.did" placeholder="请选择部门" style="width: 300px">
                    <el-option v-for="(department, index) in departmentList" :key="index" :label="department.dname"
                        :value="department.did" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insert">确定</el-button>
            </div>
        </template>

    </el-dialog>
    <!--添加维修人员对话框结束 -->
    <!--修改维修人员对话框开始 -->
    <el-dialog v-model="updateDialogShow" title="修改维修人员" width="500">
        <el-form>
            <el-form-item label="维修人员姓名" label-width="25%">
                <el-input v-model="repairPersonnelUpdate.pname" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="维修人员电话" label-width="25%">
                <el-input v-model="repairPersonnelUpdate.pphone" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="部门名称" label-width="25%">
                <el-select v-model="repairPersonnelUpdate.did" placeholder="请选择部门" style="width: 300px">
                    <el-option v-for="(department, index) in departmentList" :key="index" :label="department.dname"
                        :value="department.did" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!--修改维修人员对话框结束 -->
     <!--添加维修人员账密对话框开始 -->
     <el-dialog v-model="AddUpDialogShow" title="添加维修人员账密" width="500">
        <el-form>
            <el-form-item label="维修人员pid" label-width="20%" v-show="false">
                <el-input v-model="upAdd.pid" autocomplete="off" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="维修人员权限" label-width="20%"v-show="false">
                <el-input v-model="upAdd.root" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="维修人员用户名" label-width="25%">
                <el-input v-model="upAdd.username" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="维修人员密码" label-width="25%">
                <el-input v-model="upAdd.password" autocomplete="off" style="width: 300px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="AddUpDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insertUp">确定</el-button>
            </div>
        </template>

    </el-dialog>
    <!--添加维修人员账密对话框结束 -->
     <!--修改维修人员账密对话框开始 -->
     <el-dialog v-model="UpdateUpDialogShow" title="添加维修人员账密" width="500">
        <el-form>
            <el-form-item label="维修人员pid" label-width="20%" v-show="false">
                <el-input v-model="upUpdate.pid" autocomplete="off" style="width: 300px;" />
            </el-form-item>
            <el-form-item label="维修人员权限" label-width="20%"v-show="false">
                <el-input v-model="upUpdate.root" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="维修人员用户名" label-width="25%">
                <el-input v-model="upUpdate.username" autocomplete="off" style="width: 300px" />
            </el-form-item>
            <el-form-item label="维修人员密码" label-width="25%">
                <el-input v-model="upUpdate.password" autocomplete="off" style="width: 300px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="AddUpDialogShow = false">取消</el-button>
                <el-button type="primary" @click="updateUp">确定</el-button>
            </div>
        </template>

    </el-dialog>
    <!--修改维修人员账密对话框结束 -->
</template>

<script setup>
import departmentApi from '@/api/departmentApi';
import loginApi from '@/api/loginApi';
import repairPersonnelApi from '@/api/repairPersonnelApi';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'
const departmentList = ref([])
const AddUpDialogShow = ref(false);
const UpdateUpDialogShow = ref(false);

function insertUp() {
    console.log(upAdd.value);
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    loginApi.insert(upAdd.value)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                AddUpDialogShow.value = false;

                upAdd.value = {
                    username: '',
                    password: '',
                    root: 3,
                    oid: 0
                }
                //imgUrl清空
                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
//用于搜索姓名关键字
const pname = ref('');
const upAdd = ref({
    username: '',
    password: '',
    root:3,
    pid: 0,
});
const upUpdate = ref({
    username: '',
    password: '',
    root:3,
    pid: 0,
});
//用于分页
const pageInfo = ref({
    total: 0,
    pageSize: 0,
});
//被添加维修人员信息
const repairPersonnelAdd = ref({
    pname: '',
    pphone: '',
    did: 1,
});
const repairPersonnelUpdate = ref({
    pid: 0,
    pname: '',
    pphone: '',
    did: '',
});
//用于添加维修人员对话框
const addDialogShow = ref(false);
const updateDialogShow = ref(false);
function updateUp() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    loginApi.updateByPid(upUpdate.value)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                UpdateUpDialogShow.value = false;

                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}

function selectByPage(pageNum) {
    repairPersonnelApi.selectByPage(pageNum, pname.value)
        .then(resp => {
            pageInfo.value = resp.data;
        });
}

function showAddDialog() {
    departmentApi.selectAll()
        .then(resp => {
            departmentList.value = resp.data;
            addDialogShow.value = true;
        })
}
//添加
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    repairPersonnelApi.insert(repairPersonnelAdd.value)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                addDialogShow.value = false;

                repairPersonnelAdd.value = {
                    pname: '',
                    pphone: '',
                    did: 4,
                }
                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
//删除
function deleteByPid(pid) {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    repairPersonnelApi.delete(pid)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                loginApi.deleteByPid(pid);
                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
function update() {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中~~~',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    repairPersonnelApi.update(repairPersonnelUpdate.value)
        .then(resp => {
            loading.close()
            if (resp.code == 10000) {
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                updateDialogShow.value = false;

                selectByPage(pageInfo.value.pageNum);
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}
function selectBypid(pid) {
    repairPersonnelApi.selectByPid(pid)
        .then(resp => {
            repairPersonnelUpdate.value = resp.data;
            departmentApi.selectAll()
                .then(resp => {
                    departmentList.value = resp.data;
                })
            updateDialogShow.value = true;
        });
}
function selectBypid1(pid) {
    repairPersonnelApi.selectByPid(pid)
        .then(resp => {
            upAdd.value = resp.data;
            upAdd.value.root=3;
            AddUpDialogShow.value = true;
        });
}
function selectBypid2(pid) {
    repairPersonnelApi.selectByPid(pid)
        .then(resp => {
            upUpdate.value = resp.data;
            upUpdate.value.root=3;
            UpdateUpDialogShow.value = true;
        });
}
//默认查询首页
selectByPage(1);
</script>

<style scoped></style>